// 导入静态的路由 和 完整的动态路由
import { constantRoutes} from "@/router";
import {transformRoutes} from '@/utils'
export default {
  namespaced: true,
  state: {
    // 这个主要是系统的侧边栏渲染菜单的！
    routes: constantRoutes, // 用户最终完整的动态路由+静态路由  (最开始只有静态路由)
  },
  mutations: {
    // 修改routes, 传入动态的路由
    setRoutes(state, newRoutes) {
      // 静态路由+动态的路由
      state.routes = [
        ...constantRoutes,
        ...newRoutes,
        { path: "*", redirect: "/404", hidden: true },
      ];
      console.log(state.routes);
    },
  },
  actions: {
    // 过滤出属于当前用户的动态路由
    filterRoutes(context, menus) {
      console.log(menus);

      // console.log(menus);
      // menus = menus.filter((item) => {
      //   // console.log(item.component);
      //   let str = item.component;
      //   if (str) {
      //     return (
      //       str.includes("class") ||
      //       item.component.includes("exam") ||
      //       item.component.includes("permission") ||
      //       item.component.includes("subject")
      //     );
      //   }
      // });
      // console.log(menus);
      // const userAsyncRoutes = menus.map((item) => {
      //   // console.log( item.component);
      //   return {
      //     path: item.route,
      //     component: require("@/views/" + item.component).default,
      //     hidden:item.hidden === 1 ? true : false,
      //     meta: {
      //       title: item.permission_name,
      //       icon: item.icon
      //     },
      //   };
      // });
      // console.log(userAsyncRoutes);
      // TODO: 这个筛选逻辑也是要处理的； 不一定是根据name匹配；也有可能服务器直接返回动态路由映射，在这里处理component字段变为对象
      // 思路1：根据name进行匹配筛选
      // 思路2：将动态路由映射处理一下component字段，直接有了动态路由映射

      // 下面这个代码是思路1
      const userAsyncRoutes = transformRoutes(menus)
      // menus.forEach(item=>{
      //   let row = asyncRoutes.find(val=>val.name === item)
      //   row && userAsyncRoutes.push(row)
      // })
      context.commit('setRoutes',userAsyncRoutes)
      return userAsyncRoutes
    },
  },
};
